<template>
  <div class="tag-compoennt" :style="{ backgroundColor: backgroundColor ?? tagColorList[_colorIndex] }">
    {{ text }}
  </div>
</template>

<script setup>
const props = defineProps({
  text: String,
  backgroundColor: String,
  colorIndex: 0,
});

const tagColorList = [
  "rgba(39, 76, 53, 0.2)",
  "rgba(130, 136, 41, 0.2)",
  "rgba(158, 44, 153, 0.2)",
  "rgba(231, 73, 247, 0.2)",
  "rgba(119, 41, 247, 0.2)",
  "rgba(245, 0, 122, 0.2)",
];

const _colorIndex = Math.floor(props.colorIndex % tagColorList.length);
</script>

<style scoped>
.tag-compoennt {
  background: rgba(119, 41, 247, 0.2);
  padding: 4px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
}
</style>
